<template>
	<view class="help-page">
		<view class="help-content">
			<!-- 搜索框 -->
			<view class="search-box">
				<uni-search-bar :cancel-button="false" v-model="searchKeyword" placeholder="搜索常见问题"
					@confirm="handleSearch" />
			</view>

			<!-- 常见问题列表 -->
			<scroll-view scroll-y="true">
				<view class="faq-section">
					<uni-section title="常见问题" type="line">
						<uni-collapse>
							<uni-collapse-item v-for="faq in faqs" :key="faq.id" :title="faq.question">
								<view class="faq-answer">{{ faq.answer }}</view>
							</uni-collapse-item>
						</uni-collapse>
					</uni-section>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 搜索关键词
	const searchKeyword = ref('')

	// 问题分类
	const categories = ref([{
			id: 1,
			name: '账户相关',
			icon: 'person'
		},
		{
			id: 2,
			name: '订单问题',
			icon: 'cart'
		},
		{
			id: 3,
			name: '支付相关',
			icon: 'wallet'
		},
		{
			id: 4,
			name: '配送问题',
			icon: 'car'
		},
		{
			id: 5,
			name: '售后服务',
			icon: 'headphones'
		},
		{
			id: 6,
			name: '其他问题',
			icon: 'help'
		}
	])

	// 常见问题列表
	const faqs = ref([{
			id: 1,
			question: '如何修改登录密码？',
			answer: '进入个人中心-设置-账户安全，点击修改密码，按照提示操作即可完成密码修改。'
		},
		{
			id: 2,
			question: '订单何时发货？',
			answer: '正常情况下，订单支付成功后24小时内发货。如遇节假日或特殊情况可能会延迟，请以实际发货通知为准。'
		},
		{
			id: 3,
			question: '如何申请退款？',
			answer: '在订单详情页面，点击"申请退款"按钮，按照提示操作即可完成退款申请。'
		},
		{
			id: 4,
			question: '配送时间如何确认？',
			answer: '配送时间以实际送达时间为准，您可以在订单详情页面查看。'
		}
	])
	// 搜索常见问题
	const handleSearch = () => {
		// 根据搜索关键词筛选常见问题列表
		const filteredFaqs = faqs.value.filter(faq => faq.question.includes(searchKeyword.value))
		faqs.value = filteredFaqs
	}
</script>

<style lang="scss" scoped>
	.help-page {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.search-box {
		margin: 10px 0 16px 0;
		background-color: #fff;
		border-radius: 10px;
	}

	.help-content {
		padding: 20px;
	}

	.faq-section {
		border-radius: 10px;
		margin-bottom: 20px;
		overflow: hidden;

		.faq-answer {
			color: #888;
			font-size: 14px;
			margin: 5px 20px;
		}
	}
</style>